<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .list{
        width: 500px;
        margin: 0 auto;
        overflow: hidden;
    }
    .list li{
       width: 100px;
       height: 30px;
       border: 1px solid black;
       list-style: none;
       float: left;
       text-align: center;
    }
    .content{
        margin: 0 auto;
        width:500px;
    }
    .content li{
        width:406px;
        height: 400px;
        display: none;
        border: 1px solid black;
    }
    .list .l_active{
        background: red;
    }
    .content .c_active{
        display: block;
    }
    </style>
</head>
<body>
    <ul class="list">
        <li class=l_active>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
    <ul class="content">
            <li class="c_active">11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
        </ul>   
    <script>
     var list=document.getElementsByClassName("list")[0]
     var list_li=list.getElementsByTagName("li")
     var content=document.getElementsByClassName("content")[0]
     var content_li=content.getElementsByTagName("li")
     var index=0
    //  for(var i=0;i<list_li.length;i++){
    //       list_li[i].setAttribute("index",i)
    //       list_li[i].onclick=function (){    
    //        for(var j=0;j<list_li.length;j++){
    //            list_li[j].removeAttribute("class")
    //            content_li[j].removeAttribute("class")
    //        }  
    //         this.setAttribute("class","l_active")
    //         var number=Number(this.getAttribute("index"))
    //         content_li[number].setAttribute("class","c_active")
    //         index=number;
    //       }
    //  }
     
    //  封装一个函数,把i保存在函数里面
    // for(var i=0;i<list_li.length;i++){
    //     fn()
    //     function fn(){
    //         var a=i
    //       list_li[a].onclick=function (){
    //        for(var j=0;j<list_li.length;j++){
    //            list_li[j].removeAttribute("class")
    //            content_li[j].removeAttribute("class")
    //        }
    //         list_li[a].setAttribute("class","l_active")
    //         content_li[a].setAttribute("class","c_active") 
    //         index=a         
    //       }
    //     }  
    //  }
    
    //  把外层加一个立即执行函数
    //  for(var i=0;i<list_li.length;i++){
    //     (function (){
    //         var a=i
    //       list_li[a].onclick=function (){
    //        for(var j=0;j<list_li.length;j++){
    //            list_li[j].removeAttribute("class")
    //            content_li[j].removeAttribute("class")
    //        }
    //         list_li[a].setAttribute("class","l_active")
    //         content_li[a].setAttribute("class","c_active") 
    //         index=a         
    //       }
    //     })()  
    //  }
      
        // 用let来声明变量
        for(let i=0;i<list_li.length;i++){
          list_li[i].onclick=function (){    
           for(var j=0;j<list_li.length;j++){
               list_li[j].removeAttribute("class")
               content_li[j].removeAttribute("class")
           }  
            list_li[i].setAttribute("class","l_active")
            content_li[i].setAttribute("class","c_active")
            index=i;
          }
     }
 

    setInterval(function(){
        for(var j=0;j<content_li.length;j++){
            content_li[j].removeAttribute("class")
            list_li[j].removeAttribute("class")
        }
        content_li[index].setAttribute("class","c_active")
        list_li[index].setAttribute("class","l_active")
        index++
        if(index>=content_li.length){
            index=0
        }
    },1000)
    
    </script>
</body>
</html>